<template>
  <h1>文本相关指令</h1>
  <!-- 插值指令:让此处的显示文本与变量的值进行绑定 -->
  <p>{{ info }}</p>
  <h3>{{ info }}</h3>
  <h1>{{ info }}</h1>
  <!-- 响应式变量也可以进行拼接 -->
  {{info+'早上好!'}}
  <hr>
  <button @click="f()">我是按钮</button>
  <hr>
  <p v-text="info"></p>
  <p v-html="info"></p>
</template>

<script setup>
import {ref} from "vue";
//创建响应式变量,注意:响应式变量必须导入!
const info = ref("测试文本hhhh");

//箭头函数,固定写法,()是参数列表 {}是方法体
const f = ()=>{
  //响应式变量在js代码中必须.value!!!
  info.value = '值更新了!';
  info.value = '值<b>更新</b>了!';
}

</script>

<style scoped>

</style>